自分でホームページをつくったりした時には、たくさんの人に知ってもらいたい！と思いますよね。
bannerは「旗じるし」や「垂れ幕」と訳されるように テキストや文字だけじゃなくパッと視覚に迫るバナー。
「あ、気になる」と思ってもらえるような印象的なものをつくってみたいものです！
そこでこのページではバナーの基本的な作り方やバナーのサイズってどんなものがあるの？
などなどバナーを貼る場所によっても用途は様々ですが、今回はサイトロゴを使ったバナーを当サイト「ベジタデジタ」を例に、
実際に調べたりつくったりしてみながら説明していきたいと思います！
【目次】バナー作りに必要な要素を見ながら制作にチャレンジ！
手順1：サイトロゴの色は何色ですか？
手順2：どんな特徴のあるサイトですか？
手順3：バナーのサイズってどう決めればいいの？
よく使うバナーサイズ一覧
バナーをつくってみよう！
手順1：サイトロゴの色は何色ですか？
まず考えたのが、ベジタデジタのサイトロゴは「濃い茶色」なんですけど、
バナーの背景とかワンポイントの色とかを考えた時に色合いはどんな感じがいいかなって思ったんですよね。
そこで「茶色と合う色」とか「茶色・相性・色」とかを調べてみたら、
茶色とは濃い緑色とかブルーとかがよく合うということが分かりました！
手順2：どんな特徴のあるサイトですか？
もちろんサイト名だけバナーに書いてあってもいいと思うんですけど、
全くこのサイトを知らない人が「ベジタデジタ」って書いてあるバナーを見ても「ん？よくわかんないな」
って思われて終わってしまうかもしれませんよね。
そこで簡単なサイト説明が必要かと考え、キャッチコピーを入れてみようと思います。
ベジタデジタの特徴は、「野菜果物の画像素材が無料」とか「画像制作やチラシ、ブログのアイキャッチに便利」とかです。
こんなちょっとした説明を入れておくと「お、無料の素材サイトか。」と見た人に思ってもらえそうです。
手順3：バナーのサイズってどう決めればいいの？
バナーをつくる時に大きさってどうしたらいいか悩みますよね。基本的には自由だと思います。
でもいろんなホームページなどに掲載された時に、
なんと言うか…他のバナーとマッチすると言うか、すっきり収まると言うか、そんな基準サイズみたいのがありそうです。
ってことで調べてみたら、やはり「バナーの国際標準サイズ」みたいのが定められていて、なんと名前もありました！
という訳で、その中からいくつか「よく使われてるよね」「このサイズよく見る」みたいなバナーサイズを載せてみます。
よく使うバナーサイズ一覧
「横×縦」サイズの単位はピクセル（pixel）で表しています。
Banners and Buttons（バナーとボタン）
Full Banner（フルバナー）サイズ：468×60
Leaderboard（リーダーボード）サイズ：728×90
Half Banner（ハーフバナー）サイズ：234×60
Micro Banner（マイクロバナー）サイズ：88×31
Rectangles and Pop-Ups（長方形とポップアップ）
Medium Rectangle（ミディアムレクタングル）サイズ：300×250
Square Pop-Up（スクエアポップアップ）サイズ：250×250
Vertical Rectangle（バーティカルレクタングル）サイズ：240×400
Large Rectangle（ラージレクタングル）サイズ：336×280
Skyscrapers（超高層ビル）
Wide Skyscraper（ワイドスカイクレイパー）サイズ：160×600
Skyscraper（スカイクレイパー）サイズ：120×600
Half Page Ad（ハーフページアド）サイズ：300×600
こんな感じの種類やサイズが見つかりました！その時のガイドラインを調べてみるのも面白いかもしれません。
ここまでをいったん整理してみて、バナーをつくってみよう！
バナーをつくる目的：サイトロゴを使ったバナー
バナーの色合い：濃い緑色
バナーに入れるキャッチコピー：野菜果物の画像素材が無料
バナーのサイズ：468×60(pixel)
というわけで決めた通りに1度つくってみました！思ったより暗い感じになっちゃいましたね（汗）。
これを基本にして色合いを変えてみたり、野菜や果物の画像を入れてみたりしたら良くなりそうです。
あとがき
いかがでしたでしょうか。今回はよく使うバナーサイズ一覧とバナー作り方基本的な3つの手順ということで、
「バナーの色合いを考える」「キャッチコピーを考える」「サイズを考える」という3ステップについて書いてみました。
あとはデザインや構図などをアレンジしていく作業になりますね。
僕もさっきの自分でつくったバナーを見てセンスがないなぁ～と感じたので、もっとデザインについて勉強したいと思います。
…そこで。
一番早いのはやっぱりデザインが素晴らしいなぁ～って思うバナーをとにかく見ることですよね？
ベジタデジタは野菜や果物専門なので、野菜やフルーツが多く使われるのは…。
ということで「野菜酵素」なんかがいいんじゃないか？って思ました！
たくさんの野菜や果物を発酵させたりペーストにして混ぜたりするアレです。
野菜や果物を使ってどんなバナーがつくられているんでしょうか？
ちなみに300×250(pixel)
こんな感じです。どれもやっぱり構図やキャッチコピーもすごい。
こんなデザインでつくってみたいなぁ～って憧れちゃいます。
このページをご覧になって頂いている方には通販をしたり、
自社の商品をどうやって売上拡大するかと考えられている方もいらっしゃると思うんですけど、
こうしたデザインが考えられたバナー、そしてそこから作りこまれた商品ページ。
ネットに力を入れている会社さんの商品を、ためしにひとつ実際に取り寄せたり試してみると、
お客様にファンになってもらう為、商品と一緒に思いやこだわりが詰まった同封物や、
次回また継続してもらう為のアプローチや仕掛けのやり方などなど、
通販のノウハウが凝縮されていて、すごいなぁ～って思ったりします。
まさに勉強の宝庫ですね。